<template>
  <div class="file_module" v-if="moduleData.length>0">
    <div class="sort_title">
      <i class="iconfont icon-wenjian"></i>
      <span class="module_name">{{moduleData[0].moduleName}}</span>
    </div>
    <div class="file_item" :key="index" v-for="(item, index) in moduleData">
      <file-icon :fileName="item.name"></file-icon>
      <div class="file_name" :title="item.name">{{item.name}}</div>
      <div class="file_state">
        <span v-if="item.status==='uploading'&&!isNaN(item.percentage)" class="percent">{{item.percentage}}%</span>
        <i v-if="item.status==='uploading'&&!isNaN(item.percentage)" @click="cancelUpload(item)"
           class="iconfont icon-ic_cancel"></i>
        <i v-if="item.status==='success'" class="iconfont icon-zhengquetishi"></i>
        <span v-if="item.status==='cancel'" class="upload_cancel">已取消</span>
        <span v-if="item.status==='failed'" class="upload_failed">上传失败</span>
      </div>
      <div class="progressBar" v-if="item.status==='uploading'&&!isNaN(item.percentage)">
        <div class="progress_line" :style="{width: item.percentage + '%'}"></div>
      </div>
    </div>
  </div>
</template>

<script>
import FileIcon from '@/components/FileIcon'

export default {
  name: 'UploadFileModule',
  components: {
    FileIcon
  },
  props: {
    moduleName: {
      type: String,
      default: ''
    },
    moduleData: {
      type: Array,
      default() {
        return [
          // {module: 'generalDoc', moduleName: '通用工艺文件管理', name: '产品A完整PBOM版本 (1).pdf', percentage: 50, status: 'uploading'},
          // {module: 'generalDoc', moduleName: '通用工艺文件管理', name: '产品A完整PBOM版本 (1).pdf', percentage: 100, status: 'cancel'},
          // {module: 'generalDoc', moduleName: '通用工艺文件管理', name: '产品A完整PBOM版本 (1).pdf', percentage: 100, status: 'failed'},
          // {module: 'generalDoc', moduleName: '通用工艺文件管理', name: '产品A完整PBOM版本 (1).pdf', percentage: 100, status: 'uploading'},
          // {module: 'generalDoc', moduleName: '通用工艺文件管理', name: '产品A完整PBOM版本 (1).pdf', percentage: 100, status: 'uploading'},
          // {module: 'generalDoc', moduleName: '通用工艺文件管理', name: '产品A完整PBOM版本 (1).pdf', percentage: 100, status: 'uploading'},
          // {module: 'generalDoc', moduleName: '通用工艺文件管理', name: '产品A完整PBOM版本 (1).pdf', percentage: 100, status: 'uploading'},
          // {module: 'generalDoc', moduleName: '通用工艺文件管理', name: '产品A完整PBOM版本 (1).pdf', percentage: 100, status: 'uploading'},
          // {module: 'generalDoc', moduleName: '通用工艺文件管理', name: '产品A完整PBOM版本 (1).pdf', percentage: 100, status: 'uploading'},
        ]
      }
    }
  },
  methods: {
    // 取消上传
    cancelUpload(item) {
      item.source.cancel()
    }
  }
}
</script>

<style lang="less" scoped>
  .file_module {
    .sort_title {
      height: 24px;
      padding-left: 10px;
      background-color: #f5f5f5;
      line-height: 24px;
      color: #666666;
      .icon-wenjian {
        color: #f39800;
        display: inline-block;
        transform: translateY(1px);
      }
      .module_name{
        font-size: 12px;
        color: #666;
      }
    }
    .file_item {
      height: 44px;
      padding: 0 10px;
      position: relative;
      display: flex;
      border: 1px #f5f5f5 solid;
      .file_name {
        width: 360px;
        padding-left: 5px;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        color: #333;
      }
      .file_state {
        text-align: right;
        width: 70px;
        margin-right: 10px;
      }
      .percent {
        color: #00b4ff;
      }
      .icon-ic_cancel {
        color: #c0c4cc;
        cursor: pointer;
      }
      .icon-zhengquetishi {
        color: #56cf56;
      }
      .upload_failed {
        font-size: 12px;
        color: #ff5a5a;
      }
      .upload_cancel {
        font-size: 12px;
        color: #798f9e;
      }
      .progressBar {
        position: absolute;
        bottom: 10px;
        height: 2px;
        background-color: #eeeeee;
        border-radius: 1px;
        width: 440px;
        overflow: hidden;
        .progress_line {
          height: 2px;
          background: url(./../../assets/img/bg_loading_line.png) top left;
          background-size: 440px 100%;
        }
      }
    }
  }
</style>
